<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Like-喜欢鲜花平台！让鲜花从农户到用户一步到位 </title>
		<meta name="keywords" content="喜欢婚礼,婚礼学堂,嘉田美合,婚礼图片,婚礼视频,婚礼VR,婚礼,婚庆" />
		<meta name="description" content="喜欢婚礼平台,以婚礼机构为切入点，以婚礼用花为切入口，整合线下婚礼资源,鲜花,婚礼用品,舞美,人员等" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
		<link rel="stylesheet" type="text/css" href="../../statics/css/cssinit.css" />
		<style type="text/css">
			.header {
				position: fixed;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				padding: 0 15px;
				box-sizing: border-box;
				background-color: #f5f5f5;
				box-shadow: inset 0px -1px 1px -1px #969696;
				z-index: 2;
				top: 0;
			}
			
			.header #backIcon {
				width: 46.5px;
				display: flex;
				align-items: center;
				width: 50px;
			}
			
			.header #backIcon span {
				font-size: 14px;
			}
			
			.header .backIcon {
				width: 10px;
				height: 10px;
				/*border: 2px solid #d9b96e;*/
				border: 2px solid #969696;
				border-bottom: none;
				border-left: none;
				transform: rotate(-135deg);
				-ms-transform: rotate(-135deg);
				-moz-transform: rotate(-135deg);
				-webkit-transform: rotate(-135deg);
				-o-transform: rotate(-135deg);
			}
			
			.header .content {
				font-size: 18px;
				color: black;
			}
			
			.header .custom {
				width: 50px;
				text-align: right;
			}
			
			.header .custom img {
				width: 17.5px;
				height: 17.5px;
				padding-right: 5px;
			}
			
			::-webkit-input-placeholder {
				/* WebKit browsers */
				color: white;
			}
			
			:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: white;
			}
			
			::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: white;
			}
			
			:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				color: white;
			}
			
			.main {
				position: fixed;
				top: 50px;
				left: 0;
				right: 0;
			}
			
			.nav {
				width: 100%;
				height: 40px;
				line-height: 40px;
				font-size: 13px;
				color: #585858;
				border-bottom: 1px solid #D6D6D6;
				display: flex;
				background: #F5F5F5;
			}
			
			.nav ul li,
			.nav ul,
			.nav span {
				display: inline-block;
				text-align: center;
			}
			
			.nav ul {
				width: 100%;
				display: flex;
				justify-content: space-around;
				padding: 0 10px;
				box-sizing: border-box;
			}
			
			.nav ul .color {
				color: #65bdd4;
			}
			
			.nav ul li .underline {
				width: 15px;
				border-top: 3px solid #65BDD4;
				position: relative;
				top: -3px;
				margin: 0 auto;
			}
			
			.list {
				width: 100%;
				box-sizing: border-box;
			}
			
			.list .single {
				display: flex;
				align-items: center;
				background: white;
				width: 100%;
				box-sizing: border-box;
				padding: 15px;
				border-bottom: 1px solid #D6D6D6;
			}
			
			.list .single img {
				width: 95px;
			}
			
			.list .single div {
				display: flex;
				flex-direction: column;
				padding: 10px;
				justify-content: space-around;
				width: calc(100% - 95px);
			}
			
			.list .single div h3 {
				font-size: 14px;
				color: #303030;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.list .single div h3 span:last-child {
				width: 45px;
				font-size: 12px;
				text-align: center;
				box-sizing: border-box;
				border-radius: 10px;
			}
			
			.list .single p {
				font-size: 11px;
				color: #8A8A8A;
			}
			
			.list .single div .price {
				font-size: 15px;
				color: #63bcd3;
				padding-right: 20px;
			}
			
			.green {
				color: #66b950;
				border: 1px solid #66b950;
			}
			
			.red {
				color: #f56366;
				border: 1px solid #f56366;
			}
			
			.gray {
				color: #a1a1a1;
				border: 1px solid #a1a1a1;
			}
		</style>
	</head>

	<body>
		<header class="header">
			<div id="backIcon">
				<div class="backIcon"></div><span>返回</span>
			</div>
			<div class="content">商品信息</div>
			<div class="custom"><span><img src="../../statics/images/cityPartner/custom.png" alt="客服"/>客服</span></div>
		</header>
		<div class="main">
			<div class="nav">
				<ul class="navList">
					<li class="color">全部
						<div class="underline"></div>
					</li>
					<li>绣球
						<div></div>
					</li>
					<li>桔梗
						<div></div>
					</li>
					<li>兰花
						<div></div>
					</li>
					<li>百合
						<div></div>
					</li>
					<li>康乃馨
						<div></div>
					</li>
					<li>叶材
						<div></div>
					</li>
				</ul>
			</div>
		</div>
		<div style="height: 90px;"></div>
		<div class="list">
			<!--<div class="single">
				<img src="../../statics/images/cityWide/sellerShop/flower.jpg" alt="" />
				<div>
					<h3 class="title"><span class="name">粉红雪山玫瑰</span><span class="green">有货</span></h3>
					<p><span class="price">18.8/枝</span><span>剩余：188枝</span></p>
					<p>规格：花头<span>10</span>cm+,枝头<span>35</span>cm+</p>
					<p>编号：<span>42010001</span></p>
					<p>上传日期：<span>2017-07-10</span></p>
				</div>
			</div>
			<div class="single">
				<img src="../../statics/images/cityWide/sellerShop/flower.jpg" alt="" />
				<div>
					<h3 class="title"><span class="name">粉红雪山玫瑰</span><span class="red">下架</span></h3>
					<p><span class="price">18.8/枝</span><span>剩余：188枝</span></p>
					<p>规格：花头<span>10</span>cm+,枝头<span>35</span>cm+</p>
					<p>编号：<span>42010001</span></p>
					<p>上传日期：<span>2017-07-10</span></p>
				</div>
			</div>
			<div class="single">
				<img src="../../statics/images/cityWide/sellerShop/flower.jpg" alt="" />
				<div>
					<h3 class="title"><span class="name">粉红雪山玫瑰</span><span class="gray">售磬</span></h3>
					<p><span class="price">18.8/枝</span><span>剩余：188枝</span></p>
					<p>规格：花头<span>10</span>cm+,枝头<span>35</span>cm+</p>
					<p>编号：<span>42010001</span></p>
					<p>上传日期：<span>2017-07-10</span></p>
				</div>
			</div>-->
		</div>

	</body>
	<script id="template" class="clearfix" type="text/html">
		<div class="single">
			<img src="{{bigImg}}" alt="" class="img" />
			<div>
				<h3 class="title"><span class="name">{{flowerName}}</span><span class="status {{color}}">{{status}}</span></h3>
				<p><span class="price">{{price}}/枝</span><span>剩余：{{count}}枝</span></p>
				<p>规格：花头<span>{{flowerHead}}</span>cm+,枝头<span>{{flowerBranch}}</span>cm+</p>
				<p>编号：<span>4201000{{flowerId}}</span></p>
				<p>上传日期：<span>{{createTime}}</span></p>
			</div>
		</div>
	</script>
	<script src="../../statics/js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>

	<script src="../../statics/bowersrc/fastclick.js" type="application/javascript" charset="utf-8"></script>
	<script src="../../statics/js/common.js" type="text/javascript" charset="utf-8"></script>

	</script>

	<script type="text/javascript">
		$(function() {
			new FastClick(document.body);
		})
	</script>
	<script type="text/javascript">
		//		var token = selectByKey("like_token");
		$(".custom").on("click", function() {
			window.location.href = "../../views/service.html";
		})
		$("#backIcon").on("click", function() {
			window.history.back(-1)
		})
		$(".navList li").on("click", function() {
			$(this).addClass("color");
			$(this).find("div").addClass("underline");
			$(".navList li").not($(this)[0]).removeClass("color");
			$(".navList li").not($(this)[0]).find("div").removeClass("underline");
		})

		$(function() {
			var token = selectByKey("like_token");
			console.log(token)
			if(token) {
				$.ajax({
					url: pathName + "/api/v2/flowercityseller/flower",
					type: "get",
					headers: {
						"Accept": "application/json",
						"Authorization": "Bearer " + token
					},
					success: function(res) {
						var res = JSON.parse(res);
						console.log(res.data)
						if(res.code == 0) {
							addData(res.data, $(".list"));

						} else {
							alert("请求失败！");
						}

					},
					error: function() {
						if(token) {
							console.log("请求接口出错")
						} else {
							console.log("token参数不对")
						}
					}
				});
			} else {
				console.log("token不存在");
			}

		})
		$(".navList li").on("click", function() {
			var cateName = $(this).text().replace(/\s*$/g, "");
			var flowerId;
			switch(cateName) {
				case "全部":
					flowerId = 0;
					break;
				case "绣球":
					flowerId = 3;
					break;
				case "桔梗":
					flowerId = 4;
					break;
				case "兰花":
					flowerId = 5;
					break;
				case "百合":
					flowerId = 6;
					break;
				case "康乃馨":
					flowerId = 7;
					break;
				case "叶材":
					flowerId = 8;
					break;
				default:
					flowerId = -1;
					break;
			}
			$(".list").html("");
			var token = selectByKey("like_token");
			if(token) {
				$.ajax({
					url: pathName + "/api/v2/flowercityseller/flower",
					type: "get",
					headers: {
						"Accept": "application/json",
						"Authorization": "Bearer " + token
					},
					data:{
						cateId:flowerId
					},
					success: function(res) {
						var res = JSON.parse(res);
						if(res.code == 0) {
							console.log(res.data);
							addData(res.data, $(".list"));
						} else {
							console.log("没有相关数据”")
						}

					},
					error: function() {
						if(token) {
							console.log("请求接口出错")
						} else {
							console.log("token参数不对")
						}
					}
				});
			} else {
				console.log("token不存在");
			}

		})

		function addData(data, htm) {
			var html = '';
			for(var i = 0; i < data.length; i++) {
				var htmlm = $("#template").html();
				if(data[i].onsale) {
					if(data[i].count > 0) {
						htmlm = htmlm.replace(/\{\{color\}\}/, "green");
						htmlm = htmlm.replace(/\{\{status\}\}/, "有货");
					} else {
						htmlm = htmlm.replace(/\{\{color\}\}/, "red");
						htmlm = htmlm.replace(/\{\{status\}\}/, "售磬");
					}
				} else {
					htmlm = htmlm.replace(/\{\{color\}\}/, "gray");
					htmlm = htmlm.replace(/\{\{status\}\}/, "下架");
				}
				htmlm = htmlm.replace(/\{\{flowerId\}\}/, data[i].flowerId);
				htmlm = htmlm.replace(/\{\{bigImg\}\}/, data[i].bigImg);
				htmlm = htmlm.replace(/\{\{flowerName\}\}/, data[i].flowerName);
				htmlm = htmlm.replace(/\{\{price\}\}/, data[i].price);
				htmlm = htmlm.replace(/\{\{count\}\}/, data[i].count);
				htmlm = htmlm.replace(/\{\{flowerHead\}\}/, data[i].flowerHead);
				htmlm = htmlm.replace(/\{\{flowerBranch\}\}/, data[i].flowerBranch);
				htmlm = htmlm.replace(/\{\{createTime\}\}/, data[i].createTime);
				html += htmlm;
			}
			//							htm.append(html);
			htm.html(html);
		}
	</script>

</html>